<template>
  <detailbox :title="type == 1 ? '重新编辑' : '新增'" @leftclick="close">
    <div slot="right" class="flex_item flex_between">
      <div v-if="type == 1" class="error error_f f12 ml10 flex_start">
        <i class="f14 el-icon-error"></i>
        审核未通过:
        <span class="ml30">
          {{ checkItem.type == 1 ? '审核人:' : checkItem.type == 3 ? '记录责任人:' : checkItem.type == 4 ? '批准人:' : '' }}
          {{ checkItem.createUserName }}
        </span>
        <span class="ml30">未通过原因: {{ checkItem.content }}</span>
      </div>
      <div v-else></div>
      <div class="flex_end">
        <el-button type="success" size="small" @click="addFile" v-if="type == 0">添加新增</el-button>
        <el-button v-if="type == 1" type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情 </el-button>
        <el-button type="primary" size="small" @click="submit">提交</el-button>
      </div>
    </div>
    <el-row>
      <el-col :span="18">
        <div style="margin-top: 10px" v-for="(form, index) in formList" :key="index" :id="'item' + index">
          <basic-container>
            <div class="main_title success_f flex_between">
              <b>
                管理信息
                <span v-if="formList.length > 1">({{ index + 1 }})</span>
              </b>
              <el-button type="danger" size="small" plain v-if="index != 0" @click="delFile(index)">删除</el-button>
            </div>
            <el-divider></el-divider>
            <div class="mb20">
              <span class="index_num success_bg">1</span>
              <b class="f14">基础信息</b>
            </div>
            <div>
              <el-form size="small" inline model="form">
                <el-form-item label="不合格品控制管理编号:" required>
                  <el-input v-model="form.number" placeholder="数据带入" class="w160 ml10" readonly v-if="form.numberType == 0 || type == 1"></el-input>
                  <el-input class="ml10 w160" placeholder="请输入" v-model="form.number" v-if="form.numberType == 1"> </el-input>
                  <el-popover placement="top-start" title="编号规则:" width="220" trigger="hover">
                    <div>
                      <p>BHGP--------不合格品</p>
                      <p>xxxx---------年月日(当前日期，8位)</p>
                      <p>xx---------流水号,从01开始</p>
                    </div>
                    <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                  </el-popover>
                </el-form-item>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="不合格品类别:" required>
                      <el-radio-group v-model="form.controlType" @change="getdevelopmentplanList($event, form)">
                        <el-radio :label="0">原材料</el-radio>
                        <el-radio :label="1">中间品</el-radio>
                        <el-radio :label="2">成品</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :label="form.controlType == 0 ? '原材料批号:' : '生产批号:'" required>
                      <el-select v-model="form.batchNumber" :no-data-text="form.controlType == 0 ? '未录入采购品检验' : form.controlType == 1 ? '未录入中间品检验' : '未录入成品检验'" class="w160" filterable default-first-option placeholder="请选择" @change="getPlanNumber($event, form)">
                        <el-option v-for="item in form.developmentplanList" :key="item.id" :label="item.batchNumber" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="f14 mb20">
                  {{ form.controlType == 0 ? '原材料信息' : form.controlType == 1 ? '中间品信息' : '成品信息' }}
                  <el-button size="mini" class="el-icon-circle-plus-outline ml10" type="primary" plain @click="addItem(form, 0)">增加</el-button>
                </div>
                <div class="reviewCon mb20" v-for="(item, i) in form.failedList" :key="i">
                  <el-row class="reviewList">
                    <el-col :span="8">
                      <el-form-item :label="form.controlType == 0 ? '原材料名称:' : form.controlType == 1 ? '中间品名称' : '产品名称:'" required>
                        <el-select v-model="item.productName" no-data-text="未录入成品检验" class="w160" filterable default-first-option placeholder="请输入/搜索" @change="getItemData($event, item, form)">
                          <el-option v-for="v in form.mainDataList" :key="v.id" :label="form.controlType == 0 ? v.materialName : form.controlType == 1 ? v.middleName : v.productName" :value="v.id"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="规格型号:" required>
                        <el-select v-model="item.productSku" class="w160" default-first-option filterable placeholder="请输入/搜索">
                          <el-option v-for="v in form.mainDataList" :key="v.id" :label="form.controlType == 0 ? v.materialSku : form.controlType == 1 ? v.middleSku : v.productSku" :value="form.controlType == 0 ? v.materialSku : form.controlType == 1 ? v.middleSku : v.productSku"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item :label="form.controlType == 0 ? '原材料编号:' : form.controlType == 1 ? '中间品编号' : '产品编号:'" required>
                        <el-input type="text" placeholder="数据带入" class="w160" v-model="item.productNumber" readonly> </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="不合格品数量:" required>
                        <el-input placeholder="请输入" class="w160" v-model="item.failedQty"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="单位:" required>
                        <el-input class="w160" placeholder="数据带入" readonly v-model="item.unit"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="不合格品处置日期:" required>
                        <el-date-picker v-model="item.dealDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" class="w160"></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="不合格品处置:" required>
                        <el-select placeholder="请选择" v-model="item.dealType" class="w160" filterable>
                          <el-option v-for="item in dealTypeList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <i class="error_f el-icon-delete pointer f20 delete" @click="delItem(form, i, 1)" v-if="i > 0"></i>
                  </el-row>
                </div>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="管理部门:" required>
                      <el-cascader
                        class="w160"
                        placeholder="请选择"
                        ref="newdept"
                        :options="deptOption"
                        v-model="form.manageDeptId"
                        :show-all-levels="false"
                        :props="{
                          value: 'id',
                          label: 'deptName',
                          emitPath: false,
                          checkStrictly: true,
                        }"
                        filterable
                        @change="getMemberOption($event, index)"
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="负责人:" required>
                      <el-select placeholder="请选择" v-model="form.manageUserId" class="w160" default-first-option filterable @change="selectChange($event, form)">
                        <el-option v-for="item in form.memberOption" :key="item.id" :value="item.id" :label="item.name"> </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="编制部门:" class="">
                      <el-input v-model="userInfo.deptName" placeholder="数据带入" readonly class="w160"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div style="margin-bottom: 10px">
              <creat-file :form="form"></creat-file>
            </div>
          </basic-container>
        </div>
      </el-col>
      <el-col :span="6" class="mt10">
        <creat-flow ref="creatFlow" :formList="formList"></creat-flow>
      </el-col>
    </el-row>
    <chooseTemplate ref="template"></chooseTemplate>
    <steps ref="steps" @close="success()"></steps>
    <confirm ref="confirm" @close="save()" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList" :systemGuifanFilesProcessList="systemGuifanFilesProcessList"></confirm>
    <showhistory ref="showhistory" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
  </detailbox>
</template>

<script>
// const moment = require('moment');
import confirm from './confirm.vue'
import { savefiles, getguifanDetail, update, getguifanList } from '@/api/myapi/tixiwenjian'
export default {
  props: {
    detailId: '',
    type: {
      type: [Number, String],
      default: 0,
    },
  },
  components: {
    confirm,
  },
  data() {
    return {
      system: 'failedcontrolprocess',
      developmentplanList: [],
      formList: [
        {
          controlType: 0,
          numberType: 0,
          failedList: [{}],
          productList: [], //原材料列表
          jiluFileList: [],
          guifanFileList: [],
          memberOption: [],
          developmentplanList: [],
        },
      ],
      guifanFilesProcessRecordList: [],
      systemGuifanFilesProcessList: [],
    }
  },
  created() {
    if (this.detailId) {
      this.getDetail()
    } else {
      this.findTypeByProcessType()
    }
    this.getdeptlist()
    this.getdevelopmentplanList()
  },
  methods: {
    addItem(form) {
      if (!form.failedList) this.$set(form, 'failedList', [])
      form.failedList.push({})
    },
    delItem(form, i) {
      form.failedList.splice(i, 1)
    },
    getDetail() {
      getguifanDetail(
        {
          id: this.detailId,
        },
        this.system
      ).then(({ data }) => {
        console.log(data)
        if (data.success) {
          if (this.type == 2) {
            delete data.data.id
            data.data.number = ''
            data.data.numberType = 0
            this.findTypeByProcessType()
          }
          this.formList = [data.data]
          this.formList.forEach((item) => {
            this.getuserByDept(item.manageDeptId, item)
          })
          this.guifanFilesProcessRecordList = data.data.processRecordList
          this.checkItem = this.guifanFilesProcessRecordList.find((item) => item.checkStatus == 2)
          this.$nextTick(() => {
            this.$refs.creatFlow.setProcessRecord(this.guifanFilesProcessRecordList)
          })
        }
      })
    },
    close() {
      this.$emit('close')
    },
    //  采购品检验 中间品检验 成品检验
    getdevelopmentplanList(type = 0, form) {
      let url = type == 0 ? 'purchaseexamineprocess' : type == 1 ? 'middleexamineprocess' : 'productexamineprocess'
      let parmas = {
        current: 1,
        size: 10000,
        processStatus: 7,
      }
      type == 0 ? (parmas.processType = 0) : ''
      getguifanList(parmas, url).then(({ data }) => {
        console.log(type == 0 ? '采购品检验-原材料' : type == 1 ? '中间品检验' : '成品检验')
        console.log(data)
        if (data && data.success) {
          if (form) {
            form.failedList = [{}]
            form.batchNumber = ''
            this.$set(form, 'developmentplanList', data.data.records)
          } else {
            this.formList[0].developmentplanList = data.data.records
            this.developmentplanList = data.data.records
          }
        }
      })
    },
    getMemberOption(val, index) {
      let dept = this.$refs.newdept[index].getCheckedNodes()
      this.formList[index].manageDeptName = dept[0].label
      this.formList[index].manageDeptId = dept[0].value
      this.formList[index].manageUserId = ''
      this.formList[index].manageUserName = ''
      this.getuserByDept(val, this.formList[index])
    },
    getPlanNumber(id, form) {
      let item = form.developmentplanList.find((e) => e.id == id)
      form.batchNumber = item.batchNumber
      form.examinDate = item.examinDate
      let url = ''
      let parmas = {
        current: 1,
        size: 10000,
      }
      if (form.controlType != 2) {
        parmas.isTongguo = 1
        parmas.processId = id
      } else {
        parmas.processStatus = 7
        parmas.batchNumber = item.batchNumber
      }
      if (form.controlType == 0) {
        url = 'purchaseexamineprocessmaterial'
      } else if (form.controlType == 1) {
        url = 'middleexamineprocessmiddle'
      } else {
        url = 'productexamineprocess'
      }
      getguifanList(parmas, url).then(({ data }) => {
        if (data && data.success) {
          this.$set(form, 'mainDataList', data.data.records)
        }
      })
    },
    getItemData(id, child, form) {
      let currentItem = form.mainDataList.find((item) => item.id == id)
      console.log(currentItem)
      if (form.controlType == 0) {
        child.productName = currentItem.materialName
        child.productNumber = currentItem.materialNumber
      } else if (form.controlType == 1) {
        child.productNumber = currentItem.middleNumber
        child.productName = currentItem.middleName
      } else {
        child.productName = currentItem.productName
        child.productNumber = currentItem.productCode
      }
      child.unit = currentItem.unit
      child.failedQty = currentItem.failedQty
    },
    submit() {
      let systemGuifanFilesProcessList = []
      let guifanFilesProcessRecordList = this.$refs.creatFlow.guifanFilesProcessRecordList
      let isOnlineReview = this.$refs.creatFlow.isOnlineReview
      for (let i = 0; i <= guifanFilesProcessRecordList.length - 1; i++) {
        let item = guifanFilesProcessRecordList[i]
        item.sort = i
        if (item.type == 1 && !item.userId) {
          this.$message.error('请选择审核人员')
          return
        }
        if (item.type == 4 && !item.userId) {
          this.$message.error('请选择批准人员')
          return
        }
        if (isOnlineReview && item.type == 3 && !item.userId) {
          this.$message.error('请选择记录责任人')
          return
        }
      }
      for (let i = 0; i < this.formList.length; i++) {
        let item = this.formList[i]
        let arr = [
          {
            value: item.number,
            tips: '请补充不合格品控制管理编号',
          },
          {
            value: item.batchNumber,
            tips: '请选择生产批号',
          },
          // {
          //   value: item.productName,
          //   tips: '请选择名称'
          // },
          // {
          //   value: item.productSku,
          //   tips: '请选择规格型号'
          // },
          // {
          //   value: item.productNumber,
          //   tips: '请选择编号'
          // },
          // {
          //   value: item.dealType === '' ? false : true,
          //   tips: '请选择不合格处理方式'
          // },
          // {
          //   value: item.failedQty,
          //   tips: '请补充不合格数量'
          // },
          // {
          //   value: item.dealDate,
          //   tips: '请选择不合格处置日期'
          // },
          {
            value: item.manageDeptId,
            tips: '请选择管理部门',
          },
          {
            value: item.manageUserId,
            tips: '请选择负责人',
          },
          {
            value: item.jiluFilesIds,
            tips: '请添加记录文件',
          },
          {
            value: item.retentionPeriod,
            tips: '请输入记录保留期限',
          },
          {
            value: item.retentionPeriod < 2 ? false : true,
            tips: '记录保留期限应≥2年',
          },
        ]
        for (let j = 0; j < arr.length; j++) {
          if (!arr[j].value) {
            this.$message.error(arr[j].tips)
            return
          }
        }
        item.createDeptName = this.userInfo.deptName
        item.createUserName = this.userInfo.user_name
        item.createUserId = this.userInfo.user_id
        item.createDeptId = this.userInfo.dept_id
        systemGuifanFilesProcessList.push({
          ...item,
          // depts: item.depts.join(','),
          processRecordList: guifanFilesProcessRecordList,
        })
      }
      this.systemGuifanFilesProcessList = systemGuifanFilesProcessList
      this.guifanFilesProcessRecordList = guifanFilesProcessRecordList
      console.log(this.systemGuifanFilesProcessList)
      console.log(this.guifanFilesProcessRecordList)
      this.openDialg('confirm')
    },
    // 保存
    save() {
      if (this.type == 1) {
        console.log(JSON.stringify(this.systemGuifanFilesProcessList))
        update(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
          if (data.success) {
            this.$message.success('提交成功')
            this.nowdate = this.dateFormat(new Date())
            this.openDialg('steps')
          }
        })
      } else {
        // console.log(this.systemGuifanFilesProcessList)
        savefiles(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
          if (data.success) {
            this.$message.success('提交成功')
            this.nowdate = this.dateFormat(new Date())
            this.openDialg('steps')
          }
        })
      }
    },
    success() {
      this.$emit('success')
    },
    // 发放的文件
    addFile() {
      this.formList.push({
        numberType: this.numberType,
        number: this.numberType == 0 ? this.findTypeByProcessType(this.liushuihao) : '',
        developmentplanList: this.developmentplanList,
        controlType: 0,
        jiluFileList: [],
        guifanFileList: [],
        failedList: [{}],
        skuList: [],
        deviceList: [],
        memberOption: [],
      })
      let index = this.formList.length - 1
      setTimeout(() => {
        let document = window.parent.document.getElementById(`item${index}`)
        document.scrollIntoView({ behavior: 'smooth' })
      }, 100)
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
.delete {
  position: absolute;
  top: 20px;
  right: 20px;
}

.btnbox {
  border: 1px solid #a3cffd;
  opacity: 1;
  border-radius: 3px 0px 0px 3px;
}

.btnleft {
  padding: 0 10px;
}

.btnright {
  border-left: 1px solid #a3cffd;
  padding: 0 10px;
  line-height: 32px;
}

.border {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  line-height: 32px;
  padding: 0 10px;
}

.preview {
  padding: 10px;
  background-color: #f0f2f5;
  margin-top: 20px;
  margin-left: 10px;
}

.preview .warn_f {
  background-color: #fbf4e0;
  border: 1px solid #f3dea4;
  line-height: 20px;
  padding: 0 4px;
  margin: 20px 0 10px;
}

.preview .tem {
  width: 377px;
  height: 512px;
}

.preview.bigpreview {
  background-color: #ffffff;
}

.preview.bigpreview .tem {
  width: 510px;
  height: 693px;
}

.error {
  background-color: #fceeec;
  border: 1px solid #f9dcd9;
  padding: 6px 10px;
  border-radius: 2px;
}

div::deep .el-checkbox.is-bordered {
  height: 32px;
  padding: 5px 10px;
}

.fileBox {
  position: relative;
  padding: 20px 10px 1px;
  border: 1px dashed #e4e8ed;

  .del {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}

.worktable {
  td,
  th {
    line-height: 28px;
  }
}

.steps {
  .f16 {
    margin-left: 6px;
  }

  .flex_center {
    margin-bottom: 7px;
  }
}

.btnbox {
  border: 1px solid #a3cffd;
  opacity: 1;
  border-radius: 3px 0px 0px 3px;
}

.btnleft {
  padding: 0 10px;
}

.btnright {
  border-left: 1px solid #a3cffd;
  padding: 0 10px;
  line-height: 32px;
}

.border {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  line-height: 32px;
  padding: 0 10px;
}

.preview {
  padding: 10px;
  background-color: #f0f2f5;
  margin-top: 20px;
  margin-left: 10px;
}

.preview .warn_f {
  background-color: #fbf4e0;
  border: 1px solid #f3dea4;
  line-height: 20px;
  padding: 0 4px;
  margin: 20px 0 10px;
}

.preview .tem {
  width: 377px;
  height: 512px;
}

.preview.bigpreview {
  background-color: #ffffff;
}

.preview.bigpreview .tem {
  width: 510px;
  height: 693px;
}

.error {
  background-color: #fceeec;
  border: 1px solid #f9dcd9;
  padding: 6px 10px;
  border-radius: 2px;
}

div::deep .el-checkbox.is-bordered {
  height: 32px;
  padding: 5px 10px;
}

.jobfile {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.jobLeft {
  width: 34%;
}

.leftTitle {
  height: 48px;
  background: #f5f7fa;
  border: 1px solid #ebf0f5;
  opacity: 1;
  line-height: 48px;
  border-radius: 0px;
  padding: 0 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #303133;
  opacity: 1;
}

.leftList {
  height: 98px;
  background: #ffffff;
  border: 1px solid #ebf0f5;
  opacity: 1;
  line-height: 95px;
  border-radius: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 15px;
}

.cenList {
  height: 48px;
  background: #ffffff;
  border: 1px solid #ebf0f5;
  opacity: 1;
  line-height: 48px;
  padding: 0 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 0px;
}

.fileBtn {
  margin-left: auto;
  margin-right: 10px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 16px;
  color: #909499;
  opacity: 1;
}

.leftBtn {
  margin-left: auto;
  margin-right: 10px;
}

.leftText {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 16px;
  color: #606366;
  opacity: 1;
}

.reviewTitle {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 0px;
  color: #606366;
  opacity: 1;
  margin-top: 30px;
}

.addReview {
  width: 74px;
  height: 32px;
  margin: 0 20px;
  background: #e6f1fc;
  border: 1px solid #a3cffd;
  opacity: 1;
  border-radius: 3px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 14px;
  color: #126bc9;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reviewText {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 18px;
  color: #909499;
  opacity: 1;
}

.reviewList {
  background: #ffffff;
  border: 1px dashed #e4e8ed;
  opacity: 1;
  border-radius: 0px;
  padding: 20px 20px 0 20px;
  position: relative;
}
</style>
